<template>
  <div class="ChildPage formPanel">
    <el-form ref="form" size="small" :model="customerInfo" label-width="60px" class="form" label-position="left">
      <div class="formPanel_title">
        <div class="formPanel_title_label">基本信息</div>
        <div class="formPanel_title_btn">
          <el-button type="primary" size="small" @click="updateInfo" v-loading="editLoading">更新</el-button>
        </div>
      </div>
      <div class="formPanel_center">
        <el-form-item label="头像">
          <SelectImg v-model="customerInfo.avatar" v-model:url="customerInfo.avatarUrl"></SelectImg>
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="昵称" prop="nickName" :rules="[{ required: true, message: '请输入昵称' }]">
              <el-input type="text" v-model="customerInfo.nickName" placeholder="请输入昵称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="姓名" prop="name" :rules="[{ required: true, message: '请输入姓名' }]">
              <el-input type="text" v-model="customerInfo.name" placeholder="请输入姓名"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="手机">
              <el-input type="text" v-model="customerInfo.mobile" placeholder="请输入手机号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱" prop="email" :rules="[{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }]">
              <el-input type="text" v-model="customerInfo.email" placeholder="请输入邮箱"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="性别">
              <el-select style="width: 100%" v-model="customerInfo.gender" placeholder="请选择性别">
                <el-option label="男" value="men"></el-option>
                <el-option label="女" value="women"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="生日">
              <el-date-picker v-model="customerInfo.birthday" type="date" value-format="YYYY-MM-DD" placeholder="请选择生日" :disabled-date="disabledDate"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <div class="formPanel_title" style="margin-top: 20px">
        <div class="formPanel_title_label">职责信息</div>
      </div>
      <div class="formPanel_center" v-loading="loading">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="角色">
              <el-tag v-for="item in userCharacterList" class="tag">{{ item.name }}</el-tag>
              <el-tag v-if="!userCharacterList.length" type="danger">无</el-tag>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="机构">
              <el-tag v-for="item in userOrganList" type="success" class="tag">{{ item.name }}</el-tag>
              <el-tag v-if="!userOrganList.length" type="danger">无</el-tag>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
  </div>
</template>

<script>

import SelectImg from "../components/common/SelectImg.vue"

export default {
  components: {
    SelectImg
  },
  data() {
    return {
      customerInfo: {},
      loading: false,
      editLoading: false,
      characterList: [],
      organList: []
    }
  },
  mounted() {
    this.customerInfo = Object.assign({}, this._userInfo);
    this.init();
  },
  computed: {
    userCharacterList() {
      return this.characterList.filter(item => this.customerInfo?.characterKeyList?.includes(item.key));
    },
    userOrganList() {
      return this.organList.filter(item => this.customerInfo?.organizationIds?.includes(item.id));
    }
  },
  methods: {
    async init() {
      try {
        this.loading = true;
        let res = await this.$api.getCharacterList({ pageSize: 10000 });
        this.characterList = res.data || [];
        let organRes = await this.$api.getOrganList();
        this.organList = organRes.data || [];
      } finally {
        this.loading = false;
      }
    },

    /**
     * 修改个人信息
     */
    updateInfo() {
      let self = this;
      this.$refs.form.validate(async (valid) => {
        if (!valid) return;
        try {
          await this.$confirm(`确认修改吗?`, '确认', {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning'
          })
        } catch (e) {
          return;
        }
        let param = {
          avatarId: self.customerInfo.avatar,
          nickName: self.customerInfo.nickName,
          name: self.customerInfo.name,
          mobile: self.customerInfo.mobile,
          email: self.customerInfo.email,
          gender: self.customerInfo.gender,
          birthday: self.customerInfo.birthday
        };
        self.editLoading = true;
        self.$api.updateUserInfo(param).then(function (res) {
          self.editLoading = false;
          delete param.avatarId;
          if (res.avatarUrl) param.avatarUrl = res.avatarUrl;
          self.$store.commit("updateUserInfo", param);
          self.$message.success("信息修改成功")
        }).catch(() => {
          self.editLoading = false
        })
      })
    },

    disabledDate(time) {
      return time.getTime() > Date.now()
    }
  }
}
</script>
<style lang="scss" scoped>
.form {
  .formPanel_center {
    .tag {
      margin: 0 8px 5px 0;
    }
  }
}
</style>
